<template>
  <div>
    <div class="form">
      <el-form ref="form"
               :model="good"
               inline
               label-width="160px"
               size="small"
               label-suffix="："
               :rules="rules">
        <div class="box-title">货信息</div>
        <el-form-item label="提单号"
                      prop="billno">
          <el-input v-model="good.billno"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="货种"
                      prop="gname" v-if="boxInfo.cstatusName == '重'">
          <el-select @change="re" clearable style="width:150px"
                   v-model="good.gname" placeholder="请选择" filterable>
          <el-option  :label="item.name" :value="item.name"  v-for="item in goodsList">
            <div style="display: flex;justify-content: space-between">
              <div>{{item.type}}</div>
              <div>{{item.name}}</div>
            </div>
          </el-option>
        </el-select>           
          <!-- <el-input v-model="good.gname"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input> -->
        </el-form-item>
        <el-form-item label="货种"
                     v-else>
          <el-select @change="re" clearable style="width:150px"
                   v-model="good.gname" placeholder="请选择" filterable>
          <el-option  :label="item.name" :value="item.name"  v-for="item in goodsList">
            <div style="display: flex;justify-content: space-between">
              <div>{{item.type}}</div>
              <div>{{item.name}}</div>
            </div>
          </el-option>
        </el-select>           
          <!-- <el-input v-model="good.gname"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input> -->
        </el-form-item>
        <el-form-item label="件数"
                      prop="gcentpks">
          <el-input v-model="good.gcentpks"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="体积（立方米）"
                      prop="gcentvol">
          <el-input v-model="good.gcentvol"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item v-if="type=='I'"
                      label="重量（吨）"
                      prop="gcentwg">
          <el-input v-model="good.gcentwg"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="货主"
                      prop="consignee">
          <el-select v-model="good.consignee"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
            <el-option v-for="item in consigneeList"
                       :key="item.id"
                       :label="item.customerCode+'/'+item.name"
                       :value="item.customerCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="条款"
                      prop="deliverymd">
          <el-select v-model="good.deliverymd"
                     placeholder="请选择"
                     clearable
                     style="width:150px">
            <el-option v-for="item in deliverymdList"
                       :key="item.id"
                       :label="item.meaning"
                       :value="item.lowValue"></el-option>

          </el-select>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button type="primary"
                   size="small"
                   style="background-color:#043AA7"
                   :loading="butLoading"
                   @click="addGood">新增</el-button>
        <el-button type="primary"
                   size="small"
                   style="background-color:#043AA7"
                   @click="cancel">保存</el-button>
      </div>
    </div>
    <div class="table">
      <div class="box-title">货列表</div>
      <el-table :data="goods"
                :header-cell-style="{ background: '#EEF1F5'}"
                style="width: 100%">
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column prop="billno"
                         label="提单号"
                         min-width="120">
        </el-table-column>
        <el-table-column prop="gname"
                         label="货名"
                         min-width="120">
        </el-table-column>
        <el-table-column prop="gcentpks"
                         label="件数"
                         min-width="100">
        </el-table-column>
        <el-table-column prop="gcentvol"
                         label="体积（立方米）"
                         min-width="120">
        </el-table-column>
        <el-table-column v-if="type=='I'"
                         prop="gcentwg"
                         label="重量（吨）"
                         min-width="120">
        </el-table-column>
        <el-table-column prop="consigneeName"
                         label="货主"
                         min-width="120">
        </el-table-column>
        <el-table-column prop="deliverymdName"
                         label="条款"
                         min-width="120">
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="120">
          <template slot-scope="scope">
            <el-button @click="del(scope.$index)"
                       type="text"
                       style="color: #FF3838">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'addGoods',
  props: {
    boxInfo: {},
    id: {},
    deliverOriginalData:{
      type:Function
    }
  },
  components: {},
  data() {
    return {
      goodsList:[],
      good: {},
      goods: [],
      rules: {
        billno: [{ required: true, message: '请输入提单号', trigger: 'blur' }],
        deliverymd: [
          { required: true, message: '请选择条款', trigger: 'change' },
        ],
        gname: [{ required: true, message: '请输入货名', trigger: 'blur' }],
        gcentwg: [{ required: true, message: '请输入重量（吨）', trigger: 'blur' }],
        consignee: [
          { required: true, message: '请选择条款', trigger: 'change' },
        ],
      },
      consigneeList: [],
      deliverymdList: [],
      type: '',
      butLoading: false,
    }
  },

  methods: {
    getNowData(){
      return JSON.stringify(this.good) + JSON.stringify(this.goods)
    },

    addGood() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loadAndUploadCheck()
        }
      })
    },
    //货种
    getGoodsType(){
      this.$api.getGoodsType().then(res=>{
          this.goodsList=res.data
      })
    },
    customerByType() {
      //货主
      this.$api
        .customerByType({ tenantTypeName: '货主' })
        .then((res) => {
          this.consigneeList = res.data.data
        })
        .catch((err) => {})
    },
    refCode() {
      //条款
      this.$api
        .refCode({ domain: 'DELIVERYMD' })
        .then((res) => {
          this.deliverymdList = res.data.data
        })
        .catch((err) => {})
    },
    cancel() {
      this.boxInfo.goods = this.goods
      this.$emit('addItem', this.boxInfo)
      this.$message.success('更新清单成功')
      //this.$emit('closeDialog')
    },
    del(index) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示')
        .then(() => {
          this.goods.splice(index, 1)
        })
        .catch(() => {})
    },
    //校验
    loadAndUploadCheck() {
      let box = { ...this.boxInfo, ...this.good }
      box.rowNum = 1
      box.internalfg = box.internalfgName 
      box.potDstnport = box.potDstnportName
      box.potUnldport = box.potUnldportName
      box.potLdport = box.potLdportName
      // this.good.consigneeName = this.consigneeList.filter(item=>{return item.customerCode == box.consignee})[0].name
      this.$set(this.good,'consigneeName',this.consigneeList.filter(item=>{return item.customerCode == box.consignee})[0]?.name || '')
      // this.good.deliverymdName = this.deliverymdList.filter(item=>{return item.lowValue == box.deliverymd})[0].meaning
      this.$set(this.good,'deliverymdName',this.deliverymdList.filter(item=>{return item.lowValue == box.deliverymd})[0]?.meaning || '')
      let params = {
        boxes: [box],
        opType: 'create',
        scdId: this.id, //船期ID
        voyType: this.type, //E或者I
      }

      this.butLoading = true
      this.$api
        .loadAndUploadCheck(params)
        .then((res) => {
          if (res.data == 'success') {
            this.$message.success('校验成功')
            // this.$emit('success', { ...this.box, ...this.box.goods[0] })
            this.goods.push({ ...this.good })
            //保存打开时的弹窗数据
            this.deliverOriginalData(JSON.stringify(this.good) + JSON.stringify(this.goods))
            // this.boxInfo.goods =yan this.goods
            this.good = {}
            this.$refs.form.resetFields()
          } else {
            this.$message.error(res.data)
          }
          this.butLoading = false
        })
        .catch((err) => {})
    },
  },

  computed: {},

  mounted() {
    this.type = this.$route.name == 'unloadList' ? 'I' : 'E'
    this.customerByType()
    this.refCode()
    this.getGoodsType()
  },
}
</script>
<style lang='scss' scoped>
.box-title {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 16px;
  line-height: 20px;
  padding-left: 10px;
  border-left: 5px solid #4980d5;
  margin-bottom: 10px;
}
.btn {
  text-align: center;
  .el-button {
    width: 80px;
  }
}
</style>